<template>
    <div class="main">
        <!-- 搜索框 -->
        <el-form>
            <el-form-item>
                <el-input v-model="inputValue" placeholder="请输入课程名称" />
            </el-form-item>
            <el-button type="primary">搜索</el-button>
        </el-form>
        <!-- 表格 -->
        <Table :list="searchCourseList" :editBtn="editBtn" :delCourseBtn="delCourseBtn" />
        <!-- 分页 -->
        <pagination :paginationChange="paginationChange" />
    </div>
    <!-- 编辑弹窗 -->
    <EditPop :popShow="popShow" v-if="popShow" :message="courseItemState.message" :confirmClick="confirmClick" />
</template>

<script setup>
import Table from './Table.vue';
import { computed, reactive, ref, onMounted } from 'vue';
import EditPop from './EditPop.vue';
import { ElMessage } from 'element-plus';
import pagination from './pagination.vue';
import { getCourseList, changeCourse, deleteCourse } from '../api/index.js'
import emitter from '../utils/eventBus';
// 模拟数据
const data = reactive({
    // list: [
    //     {
    //         "id": 2,
    //         "title": "前端CSS——渲染你的页面",
    //         "course_img": "https://www.runoob.com/wp-content/uploads/2013/07/css-logo.png",
    //         "price": 51,
    //         "point": "6",
    //         "category": "front",
    //         "del": "0"
    //     },
    //     {
    //         "id": 4,
    //         "title": "JavaScript——前端核心技术",
    //         "course_img": "https://www.runoob.com/wp-content/uploads/2013/07/js-logo.png",
    //         "price": 89,
    //         "point": "3",
    //         "category": "front",
    //         "del": "0"
    //     },
    //     {
    //         "id": 6,
    //         "title": "Vue.js——最火的前端框架",
    //         "course_img": "https://www.runoob.com/wp-content/uploads/2017/01/vue.png",
    //         "price": 90,
    //         "point": "4",
    //         "category": "front",
    //         "del": "0"
    //     },
    //     {
    //         "id": 7,
    //         "title": "MongoDB——一款好吃的数据库",
    //         "course_img": "https://www.runoob.com/wp-content/uploads/2013/10/mongodb-logo.png",
    //         "price": 39,
    //         "point": "2",
    //         "category": "front",
    //         "del": "0"
    //     }
    // ],
    list: [],
    page: 1, // 当前页码(默认第一页)
    total: 10, // 课程总数
    size: 5, // 每页显示条数
    sideCategory: 'front' // 课程分类
})

/**
 * 课程列表数据的获取
 */
const getCourseListData = async (query) => {
    const category = query?.category || data.sideCategory
    const page = query?.page || 1
    const size = query?.size || 5
    // 调用接口，获取list数据
    const res = await getCourseList({
        category,
        page,
        size
    })
    console.log('课程列表数据的获取:')
    console.log(res.data.list)
    data.list = res.data.list.filter((item) => {
        return item.category === category
    })
    // data.list = res?.data.list
    data.total = res.data.total
    console.log(data.list)
    console.log(data.total)
}

// 生命周期
onMounted(() => {
    getCourseListData()
    // 监听侧边栏切换
    emitter.on('courseType', (val) => {
        // 通过不同的type,请求不同的类型课程数据
        console.log('main组件监听侧边栏切换...')
        console.log(val)
        getCourseListData({
            category: val,
            page: 1,
            size: 5
        })
    })
})


/**
 * 搜索逻辑
*/
// 搜索框数据
const inputValue = ref('')
// 搜索的方法
const searchCourseList = computed(() => {
    return data.list?.filter((item) => {
        return item.title.indexOf(inputValue.value) >= 0
    })
    // 搜索接口的调用...
})

/**
* 课程编辑相关逻辑代码
*/
const changeCourseData = async(data) => {
    console.log('调用修改接口...')
    console.log(data)
    const {id,point,title} = data
    // 修改接口的调用
    const res = await changeCourse({id,point,title})
    if(res?.msg){
        ElMessage({
            message: res?.msg,
            type: 'success'
        })
    }
}
// 编辑的数据(需要传递给弹窗组件)
const courseItemState = reactive({
    message: {}
})

// 控制编辑弹窗显示的遍历(默认不显示)
const popShow = ref(false)

// 控制编辑弹窗显示的方法
const isShowPop = (show) => {
    popShow.value = show
}

// 编辑按钮
const editBtn = (item) => { // item 获取到当前点击的数据
    isShowPop(true)
    console.log(popShow.value)
    courseItemState.message = item  // 把当前点击的数据赋值给编辑的数据变量
    console.log(courseItemState.message)
}
// 取消和确认按钮
const confirmClick = (val) => {
    console.log(val)
    if (val === 'cancel') {
        isShowPop(false)
        // 判断这两个字段是否有修改
    } else if (
        val.title !== courseItemState.message.title ||
        val.point !== courseItemState.message.point) {
        data.list.map((item) => {
            if (item.id === val.id) {
                item.title = val.title
                item.point = val.point
            }
        })
        changeCourseData({
            id: val.id,
            title: val.title,
            point: val.point
        })
        // 隐藏对话框
        isShowPop(false)
    } else {
        ElMessage({
            showClose: true,
            message: "没有发现有更改的地方",
            trye: "warning"
        })
    }
}
/**
 * 课程删除的逻辑
 * @param val 
 */
// 删除的接口调用
const deleteCourseData = async (val) => {
    console.log(val)
    // 删除接口的调用
    const res = await deleteCourse({ id: val })
    if(res?.msg){
        ElMessage({
            message: res?.msg,
            type: 'success'
        })
    }
    // 删除后页面重新获取数据
    getCourseListData({
        category: data.sideCategory,
        page: data.page,
        size: data.size
    })
}
// 删除的按钮点击事件
const delCourseBtn = (val) => {
    console.log(val)
    if (val) {
        data.list = data.list.filter((item) => {
            return item.id !== val
        })
    }
    // 删除接口的调用....
    deleteCourseData(val)
}

/**
 * 分页的逻辑
 */
const paginationChange = (val) => {
    // 上一页
    if (val === 'pre') {
        console.log('上一页')
        if (data.page > 1) {
            data.page--
        } else {
            ElMessage({
                showClose: true,
                message: "已经是第一页了",
                trye: "warning"
            })
        }
    }
    // 下一页
    if (val === 'next') {
        console.log('下一页')
        if (data.page < Math.ceil(data.total / data.size)) {
            data.page++
        } else {
            ElMessage({
                showClose: true,
                message: "已经是最后一页了",
                trye: "warning"
            })
        }
    }
    // 调用接口
    getCourseListData({
        category: data.sideCategory,
        page: data.page,
        size: data.size
    })
}

</script>

<style lang="less" scoped></style>